<!DOCTYPE html>
<html lang="zh-cn">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>购物车</title>
		<link rel="stylesheet" href="css/style.css">
		<script src="./js/data.js"></script>
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	</head>
	<!-- 209001047-何豪 -->
	<style>
		.grey {
			background-color: rgb(230, 224, 224);
		}
		img {
			margin-bottom: -15px;
		}
		h1 {
			display: inline-block;
			margin-left: 10px;
			margin-bottom: 10px;
			margin-top: 50px;
		}
	</style>
	<body>
		<div id="app"></div>
		<template id="root">
			<div id="shopcart" class="shop-cart">
				<div class="tabs">
					<div class="border">
						<h1>购物车作业</h1>

						<div class="line"></div>
					</div>
				</div>
				<div class="lists">
					<div class="header">
						<ul class="clearfix">
							<li>
								<input type="checkbox" class="select-all" v-model="checkAll" @change="modifyCheckAll">
								<label>全选商品</label>
							</li>
							<li class="product-info">商品名称</li>
							<li>单价</li>
							<li>数量</li>
							<li>小计</li>
							<li>操作</li>
						</ul>
					</div>
					<div>
						<div class="shop">
							<div class="products">
								<div class="item" v-for="p in products" :class="[p.isChecked?'':'grey']">
									<div class="select-logo">
										<input type="checkbox" class="but" v-model="p.isChecked"
											@change="modifyProduct(p)">
										<img :src="p.topImg" alt="产品logo">
									</div>
									<div class="product-detail">
										<div class="left">
											<a href="#" class="product-name">
												{{p.productName}}
											</a>
										</div>
									</div>
									<div class="price">
										<p class="real-price">￥{{p.price}}元</p>
									</div>
									<div class="count">
										<span class="sub" @click="decrement(p)">-</span>&nbsp;
										<span class="input"><input type="text" v-model="p.count"></span>&nbsp;
										<span class="add" @click="increment(p)">+</span>
									</div>
									<div class="amount">￥{{p.count*p.price}}元</div>
									<div class="delete">
										<a href="#" @click="removeProduct(p)">×</a>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>

				<div class="operate">
					<div class="left">
						<a href="javascript:void(0);">继续购物</a>

					</div>
					<div class="weizhi">已选择商品<span class="selected-count">{{totalNum}}</span>件</div>
					<div class="right">
						//橙色线条
						<div class="amount" style="color: rgb(243, 123, 19);">合计：<span
								class="sum">￥{{totalPrice}}元</span>
						</div>
						<a href="javascript:void(0);" class="settle" style="background-color: rgb(243, 123, 19);">结算</a>
					</div>
				</div>
			</div>
		</template>
		<script>
			// 209001047-何豪
			const app = Vue.createApp({
				template: "#root",
				data() {
					return {
						products,
						checkAll: false,
					}
				},
				computed: {
					totalPrice() {
						let sum = 0
						this.products.forEach((p) => {
							if (p.isChecked) {
								sum += p.count * p.price
							}
						})
						return sum
					},
					totalNum() {
						let num = 0
						this.products.forEach((p) => {
							if (p.isChecked) {
								num += p.count
							}
						})
						return num
					}
				},
				methods: {
					increment(p) {
						p.count++
					},
					decrement(p) {
						if (p.count > 0) {
							p.count--
						}
					},
					removeProduct(p) {
						this.products.splice(this.products.indexOf(p), 1)
					},
					modifyCheckAll() {
						this.isChecked = this.checkAll
						this.products.forEach((p) => {
							p.isChecked = this.checkAll
						})
					},
					modifyProduct(p) {
						this.isChecked = this.products.length == this.products.filter((p) => {
							return p.isChecked == true
						}).length
					}
				}

			})
			app.mount("#app")
		</script>
	</body>
</html>
